import React, { useState } from 'react'
import { Outlet, Link, useNavigate } from 'react-router-dom'

export default function News() {
  let navigate = useNavigate()
  let [list] = useState([
    {
      id: '001',
      title: 'news001',
      content: 'content news001...'
    },
    {
      id: '002',
      title: 'news002',
      content: 'content news002...'
    },
    {
      id: '003',
      title: 'news003',
      content: 'content news003...'
    }
  ])

  let lookDetail = (item) => {
    console.log(item);
    navigate(`details/${item.id}/${item.title}/${item.content}`)
  }

  return (
    <>
      <ul>
        {
          list.map(item => {
            return (
              <li key={item.id}>
                {/* search 参数写法 */}
                {/* <Link to={`details?id=${item.id}&title=${item.title}&content=${item.content}`} >{item.title}</Link> */}

                {/* params 参数写法 */}
                <Link to={`details/${item.id}/${item.title}/${item.content}`} >{item.title}</Link>
                
                &nbsp;&nbsp;

                <button onClick={()=>{lookDetail(item)}}>查看详情</button>
              </li>
            )
          })
        }
      </ul>

      <Outlet></Outlet>
    </>
  )
}
